<template>
    <div>
      <h2>添加课程</h2>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/AdminMain/AdminHome">主页</el-breadcrumb-item>
        <el-breadcrumb-item to="/AdminMain/ClassManager">课程管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加课程</el-breadcrumb-item>
      </el-breadcrumb>
  
      <el-card style="margin-top: 20px;">
        <el-form :model="form" :rules="rules" ref="addForm" label-width="100px">
          <el-form-item label="编号" prop="classId">
            <el-input v-model="form.classId" placeholder="4位编号" />
          </el-form-item>
  
          <el-form-item label="名称" prop="className">
            <el-input v-model="form.className" placeholder="课程名称" />
          </el-form-item>
  
          <el-form-item label="时间" prop="classBegin">
            <el-input v-model="form.classBegin" placeholder="xxxx年xx月xx日 00:00" />
          </el-form-item>
  
          <el-form-item label="时长" prop="classTime">
            <el-input v-model="form.classTime" placeholder="xx分钟" />
          </el-form-item>
  
          <el-form-item label="教练" prop="coach">
            <el-input v-model="form.coach" placeholder="教练" />
          </el-form-item>
  
          <el-form-item>
            <el-button type="success" @click="onSubmit">添加</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router'
  import axios from "axios";
  // import axios from 'axios'   // 后续接后端再启用
  
  const router = useRouter()
  
  const form = ref({
    classId: '',
    className: '',
    classBegin: '',
    classTime: '',
    coach: ''
  })
  
  const rules = {
    classId: [{ required: true, message: '请输入课程编号', trigger: 'blur' }],
    className: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
    classBegin: [{ required: true, message: '请输入课程时间', trigger: 'blur' }],
    classTime: [{ required: true, message: '请输入课程时长', trigger: 'blur' }],
    coach: [{ required: true, message: '请输入教练姓名', trigger: 'blur' }]
  }
  
  const addForm = ref()
  
  const onSubmit = () => {
    addForm.value.validate(valid => {
      if (valid) {
        // 提交数据
           axios.post('/server/class/add', form.value)
             .then(response => {
               if (response.data.code === 200) {
                 ElMessage.success('课程添加成功')
                 router.push('/AdminMain/ClassManager')
               } else {
                 ElMessage.error('添加失败: ' + response.data.message)
               }
             })
             .catch(() => {
               ElMessage.error('提交失败，服务器错误')
             })
      } else {
        ElMessage.error('请填写完整的课程信息')
      }
    })
  }
  
  const onReset = () => {
    form.value = {
      classId: '',
      className: '',
      classBegin: '',
      classTime: '',
      coach: ''
    }
  }
  </script>
  
  <style scoped>
  /* 可以按需添加样式 */
  </style>
  